<template>
    <h2>菜单添加</h2>
    <el-form :model="formInline" class="demo-form-inline">
        <el-form-item label="父级菜单：">
            <el-select v-model="formInline.parent_id" placeholder="请选择父级菜单" clearable>
                <el-option label="顶级菜单" value="0" />
                <el-option v-for="item in tabelMenu" :label="item.menu_name" :value="item.id" />
            </el-select>
            <!-- <el-tree-select
                    style="max-width: 300px;margin-top: 20px;"
                    :data="tabelMenu"
                    node-key="value"
                    :props="props"
                    show-checkbox
                    placeholder="请选择父级菜单"
                    default-expand-all="true"
                    @check-change="handleCheckChange"
                /> -->
                <!-- <el-tree
                    style="max-width: 600px"
                    :data="tabelMenu"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                /> -->
                <!-- <el-tree-select
                    node-key="value"
                    v-model="formInline.parent_id"
                    :data="tabelMenu"
                    :render-after-expand="false"
                    style="width: 240px"
                /> -->
        </el-form-item>
        <el-form-item label="菜单名称：">
            <el-input v-model="formInline.menu_name" placeholder="菜单名称" clearable />
        </el-form-item>
        <el-form-item label="菜单Url：">
            <el-input v-model="formInline.menu_url" placeholder="请输入路径" clearable />
        </el-form-item>
        <el-form-item label="授权：">
            <el-input v-model="formInline.perms" placeholder="授权" clearable />
        </el-form-item>
        <el-form-item label="类型：">
            <el-select v-model="formInline.type" placeholder="请选择类型" clearable>
                <el-option label="目录" value="0" />
                <el-option label="菜单" value="1" />
                <el-option label="按钮" value="2" />
            </el-select>
        </el-form-item>
        <el-form-item label="排序：">
            <el-input v-model="formInline.order_num" placeholder="排序" clearable />
        </el-form-item>
        <el-form-item label="菜单图标：">
            <el-input v-model="formInline.menu_icon" placeholder="菜单图标" clearable />
        </el-form-item>
        <el-form-item label="是否启用功能：">
            <el-radio-group v-model="formInline.buttontable">
                <el-radio :value="1">是</el-radio>
                <el-radio :value="2">否</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key"
            :prop="'domains.' + index + '.value'" v-if="formInline.buttontable == 1">
            功能名称：<el-input v-model="formInline.permission_name" />
            功能路径：<el-input v-model="formInline.is_perms" />
            <el-button class="mt-2" @click.prevent="removeDomain(domain)">
                删除
            </el-button>
            <el-button @click="addDomain">添加</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>
        </el-form-item>
    </el-form>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { reactive, ref, onMounted } from 'vue'
import http from '../http.js'
onMounted(() => {
    GetMenu();
})
const formInline = reactive({
    parent_id: "",
    menu_name: "",
    menu_url: "",
    perms: "",
    type: "",
    menu_icon: "",
    order_num: "",
    buttontable: 2,
    permission_name: '',
    is_perms: ''
})
interface DomainItem {
    key: number
    value: string
}
const removeDomain = (item: DomainItem) => {
    const index = dynamicValidateForm.domains.indexOf(item)
    if (index !== -1) {
        dynamicValidateForm.domains.splice(index, 1)
    }
}

const addDomain = () => {
    dynamicValidateForm.domains.push({
        key: Date.now(),
        value: '',
    })
}
const dynamicValidateForm = reactive<{
    domains: DomainItem[]
    email: string
}>({
    domains: [
        {
            key: 1,
            value: '',
        },
    ],
    email: '',
})
const props = {
    label: 'label',
    children: 'children',
    id: 'value'
}
//父级菜单多选框取值
// const handleCheckChange = (data: any, check: any) => {
//     if (check) {
//         formInline.parent_id.push(data.value);
//         console.log(formInline.parent_id)
//     }
//     else {
//         formInline.parent_id = formInline.parent_id.filter(x => x !== data.value)
//         console.log(formInline.parent_id)
//     }

// }
const handleNodeClick = (data: any) => {
  console.log(data)
}
//添加
const onSubmit = () => {
    // console.log(formInline)
    if (formInline.buttontable == 1) {
        let ds = {
        parent_id: formInline.parent_id,
        menu_name: formInline.menu_name,
        menu_url: formInline.menu_url,
        perms: formInline.perms,
        type: formInline.type,
        menu_icon: formInline.menu_icon,
        order_num: formInline.order_num,
        button: [{
            permission_name: formInline.permission_name,
            is_perms: formInline.is_perms
        }]
        }
        console.log(ds);
        axios({
            method: "post",
            url: http.RBACxie+"/api/Menu/menuCreate",
            data: ds
        })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
            }
            if (res.data.code == 2001) {
                ElMessage.success(res.data.message)
            }
        })
    }
    else {
        let ds1 = {
        parent_id: formInline.parent_id,
        menu_name: formInline.menu_name,
        menu_url: formInline.menu_url,
        perms: formInline.perms,
        type: formInline.type,
        menu_icon: formInline.menu_icon,
        order_num: formInline.order_num,
        button: []
        }
        console.log(ds1);
        axios({
            method: "post",
            url: http.RBACxie+"/api/Menu/menuCreate",
            data: ds1
        })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
            }
            if (res.data.code == 2001) {
                ElMessage.success(res.data.message)
            }
        })
    }
    
}
//菜单树形显示
const tabelMenu = ref([]);
const GetMenu = () => {
    axios({
        method: "get",
        url: http.RBACdu+"/api/Menu/MenuSelectShow"
    })
        .then(res => {
            console.log(res.data.data);
            tabelMenu.value = res.data.data
        })
}
const defaultProps = {
  children: 'children',
  label: 'label',
}
</script>

<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>